import React from 'react';
import { Form, Select, InputNumber, Input, Switch, Card, Row, Col, Space, Typography } from 'antd';
import { PDFExportOptions } from '../../../services/export/types';

const { Title, Text } = Typography;

interface PDFExportConfigProps {
  options: PDFExportOptions;
  onChange: (options: PDFExportOptions) => void;
  filename: string;
  onFilenameChange: (filename: string) => void;
  disabled?: boolean;
}

export const PDFExportConfig: React.FC<PDFExportConfigProps> = ({
  options,
  onChange,
  filename,
  onFilenameChange,
  disabled = false
}) => {
  const handleFieldChange = (field: keyof PDFExportOptions, value: any) => {
    onChange({
      ...options,
      [field]: value
    });
  };

  const handleMarginChange = (side: keyof PDFExportOptions['margins'], value: number) => {
    onChange({
      ...options,
      margins: {
        ...options.margins,
        [side]: value
      }
    });
  };

  return (
    <div>
      <Form layout="vertical" disabled={disabled}>
        {/* 基本设置 */}
        <Card title="基本设置" size="small" style={{ marginBottom: 16 }}>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="文件名" required>
                <Input
                  value={filename}
                  onChange={(e) => onFilenameChange(e.target.value)}
                  placeholder="请输入文件名"
                  suffix=".pdf"
                />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="纸张格式">
                <Select
                  value={options.format}
                  onChange={(value) => handleFieldChange('format', value)}
                >
                  <Select.Option value="A4">A4</Select.Option>
                  <Select.Option value="A3">A3</Select.Option>
                  <Select.Option value="Letter">Letter</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="页面方向">
                <Select
                  value={options.orientation}
                  onChange={(value) => handleFieldChange('orientation', value)}
                >
                  <Select.Option value="portrait">纵向</Select.Option>
                  <Select.Option value="landscape">横向</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Card>

        {/* 字体设置 */}
        <Card title="字体设置" size="small" style={{ marginBottom: 16 }}>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="字体族">
                <Select
                  value={options.fontFamily}
                  onChange={(value) => handleFieldChange('fontFamily', value)}
                >
                  <Select.Option value="SimSun, serif">宋体</Select.Option>
                  <Select.Option value="SimHei, sans-serif">黑体</Select.Option>
                  <Select.Option value="Microsoft YaHei, sans-serif">微软雅黑</Select.Option>
                  <Select.Option value="KaiTi, serif">楷体</Select.Option>
                  <Select.Option value="FangSong, serif">仿宋</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="字体大小">
                <InputNumber
                  value={options.fontSize}
                  onChange={(value) => handleFieldChange('fontSize', value || 12)}
                  min={8}
                  max={24}
                  step={1}
                  addonAfter="px"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="导出质量">
                <Select
                  value={options.quality}
                  onChange={(value) => handleFieldChange('quality', value)}
                >
                  <Select.Option value="low">低质量</Select.Option>
                  <Select.Option value="medium">中等质量</Select.Option>
                  <Select.Option value="high">高质量</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Card>

        {/* 页边距设置 */}
        <Card title="页边距设置" size="small" style={{ marginBottom: 16 }}>
          <Row gutter={16}>
            <Col span={6}>
              <Form.Item label="上边距">
                <InputNumber
                  value={options.margins.top}
                  onChange={(value) => handleMarginChange('top', value || 20)}
                  min={0}
                  max={50}
                  step={1}
                  addonAfter="mm"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="右边距">
                <InputNumber
                  value={options.margins.right}
                  onChange={(value) => handleMarginChange('right', value || 20)}
                  min={0}
                  max={50}
                  step={1}
                  addonAfter="mm"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="下边距">
                <InputNumber
                  value={options.margins.bottom}
                  onChange={(value) => handleMarginChange('bottom', value || 20)}
                  min={0}
                  max={50}
                  step={1}
                  addonAfter="mm"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="左边距">
                <InputNumber
                  value={options.margins.left}
                  onChange={(value) => handleMarginChange('left', value || 20)}
                  min={0}
                  max={50}
                  step={1}
                  addonAfter="mm"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
          </Row>
        </Card>

        {/* 高级选项 */}
        <Card title="高级选项" size="small">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="水印文字" help="在PDF页面添加水印文字">
                <Input
                  value={options.watermark || ''}
                  onChange={(e) => handleFieldChange('watermark', e.target.value || undefined)}
                  placeholder="可选，留空则不添加水印"
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item>
                <Space direction="vertical" style={{ width: '100%' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Text>包含文档元数据</Text>
                    <Switch
                      checked={options.includeMetadata}
                      onChange={(checked) => handleFieldChange('includeMetadata', checked)}
                    />
                  </div>
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    在PDF中包含标题、作者等元数据信息
                  </Text>
                </Space>
              </Form.Item>
            </Col>
          </Row>
        </Card>
      </Form>

      {/* 预览信息 */}
      <Card size="small" style={{ marginTop: 16, backgroundColor: '#f8f9fa' }}>
        <Title level={5} style={{ margin: '0 0 8px 0' }}>导出预览</Title>
        <Space direction="vertical" size="small">
          <Text type="secondary">
            纸张: {options.format} ({options.orientation === 'portrait' ? '纵向' : '横向'})
          </Text>
          <Text type="secondary">
            字体: {options.fontFamily.split(',')[0]} {options.fontSize}px
          </Text>
          <Text type="secondary">
            页边距: 上{options.margins.top}mm 右{options.margins.right}mm 下{options.margins.bottom}mm 左{options.margins.left}mm
          </Text>
          {options.watermark && (
            <Text type="secondary">
              水印: {options.watermark}
            </Text>
          )}
        </Space>
      </Card>
    </div>
  );
};